<html>
<!-- by @Saa noCopyRight-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="game,html5,canvas">
<title>Shoot game - by @Saa</title>
<script type='text/javascript' src='./js/gamews.js'></script>

<style>
body{
	margin:0px;
	padding:0px;
	background:url(./img/demo.png);
}
canvas{
	position:absolute;
	margin:0px;
	padding:0px;
	top:125px;
	left:370px;
}
#redVsBlue {
	margin-top:7px;
	margin-left:590px;
	padding:0px;
}
#nameTag{
	margin-top:23px;
	margin-left:50px;
	background:url(./img/Name.png);
	width:230;
	height:71;
	
	border: 1px solid transparent;
}
#killTag{
	margin-top:23px;
	margin-left:65px;
	background:url(./img/Kills.png);
	width:214;
	height:60;
	
	border: 1px solid transparent;
}
#deathTag{
	margin-top:23px;
	margin-left:42px;
	background:url(./img/Death.png);
	width:236;
	height:72;
	
	border: 1px solid transparent;
}
#markPad{
	margin-top:70px;
	margin-left:73px;
}
#p0{display:none;}
#p1{display:none;}
#p2{display:none;}
#p3{display:none;}
#p4{display:none;}
#p5{display:none;}

#d5,#d0,#d4,#d3,#d2,#d1,#background{display:none;}

#playerName{
	padding:0px;
	margin:0px;
	margin-left:100px;
	margin-top:10px;
	
}
#killNum{
	padding:0px;
	margin:0px;
	margin-left:87px;
	
	margin-top:10px;
}
#deathNum{
	padding:0px;
	margin:0px;
	margin-left:110px;
	
	margin-top:30px;
}
h2{font-family: "Lucida Grande", "Lucida Sans Unicode", sans-serif;color:gray;}
#screenBlack{
	background: url(./img/screenBlack0.png);
	width:1280px;
	height:698px;
	position:absolute;
	top:0px;
	left:0px;
}
#scense{
	position:absolute;
	top:252px;
	left:610px;
	z-index:100;
}
.displayNone{
	display:none;
}
</style>

</head>
<body>
<div id="log"></div>

	<canvas id="scense" width=100 height=200></canvas>

	<canvas id="p0" width=100 height=200></canvas>
	<canvas id="p1" width=100 height=200></canvas>
	<canvas id="p2" width=100 height=200></canvas>
	<canvas id="p3" width=100 height=200></canvas>
	<canvas id="p4" width=100 height=200></canvas>
	<canvas id="p5" width=100 height=200></canvas>
	
	
	<canvas id="d0" width=100 height=200></canvas>
	<canvas id="d1" width=100 height=200></canvas>
	<canvas id="d2" width=100 height=200></canvas>
	<canvas id="d3" width=100 height=200></canvas>
	<canvas id="d4" width=100 height=200></canvas>
	<canvas id="d5" width=100 height=200></canvas>
	
	
	<img src="./img/free_Battle.png" id="redVsBlue">
	<div id="nameTag"><h2 id="playerName"></h2></div>
	<div id="killTag"><h2 id="killNum"></h2></div>
	<div id="deathTag"><h2 id="deathNum"></h2></div>

	<div id="game">
		<canvas id="main" width="770" height="515"></canvas>
	</div>
	
	<img id="markPad" src="./img/freeBattle.png">
	<img id="background" src="./img/background.png">
	<img id="speedUp" class="displayNone" src="./img/speedUp.png">
	<img id="noHurt" class="displayNone" src="./img/noHurt.png">
	
		

	<div>
		<audio id="fire3" >
		<source src="./music/FIRE3.mp3" />
		</audio>
	</div>
	
	<div>
		<audio id="fire4" >
		<source src="./music/FIRE4.mp3" />
		</audio>
	</div>
	
	<div>
		<audio id="fire2" >
		<source src="./music/FIRE2.mp3" />
		</audio>
	</div>
	
	<div>
		<audio id="fire1" >
		<source src="./music/FIRE1.mp3" />
		</audio>
	</div>
	
	<div>
		<audio id="hit_music" >
		<source src="./music/hit.mp3" />
		</audio>
	</div>

	<div>
		<audio id="init" loop>
		<source src="./music/leech.mp3" />
		</audio>
	</div>

	<div>
		<audio id="first" >
		<source src="./music/first.mp3" />
		</audio>
	</div>

	<div>
		<audio id="double" >
		<source src="./music/double.mp3" />
		</audio>
	</div>

	<div>
		<audio id="three" >
		<source src="./music/three.mp3" />
		</audio>
	</div>
	<div>
		<audio id="four" >
		<source src="./music/four.mp3" />
		</audio>
	</div>

	<div>
		<audio id="five" >
		<source src="./music/five.mp3" />
		</audio>
	</div>
	
	<div id="screenBlack"></div>
	
	<script type="text/javascript" src="./js/main.js"></script>
	<script type="text/javascript" src="./js/player.js"></script>
	<script type="text/javascript" src="./js/ground.js"></script>
	<script type="text/javascript" src="./js/Enemy.js"></script>

	
	<script type="text/javascript">
	
		var m_die=new Array();
		var m_fire3=document.getElementById("fire3");
		var m_fire4=document.getElementById("fire4");
		var m_fire2=document.getElementById("fire2");
		var m_fire1=document.getElementById("fire1");
		var m_fireHit=document.getElementById("hit_music");
		var m_init=document.getElementById("init");
		
		m_die[0]=document.getElementById("first");
		m_die[1]=document.getElementById("double");
		m_die[2]=document.getElementById("three");
		m_die[3]=document.getElementById("four");
		m_die[4]=document.getElementById("five");
	
		var canvas_data = new Array();
		var d = new Array();
		
		canvas_data[0] = document.getElementById('d0');
		canvas_data[1] = document.getElementById('d1');
		canvas_data[2] = document.getElementById('d2');
		canvas_data[3] = document.getElementById('d3');
		canvas_data[4] = document.getElementById('d4');
		canvas_data[5] = document.getElementById('d5');
		
		d[0] = canvas_data[0].getContext('2d');
		d[1] = canvas_data[1].getContext('2d');
		d[2] = canvas_data[2].getContext('2d');
		d[3] = canvas_data[3].getContext('2d');
		d[4] = canvas_data[4].getContext('2d');
		d[5] = canvas_data[5].getContext('2d');
						
	
		var speedUp=document.getElementById("speedUp");
		var noHurt=document.getElementById("noHurt");
		var gameStart=1;
		var enemys=new Array();
		var bullets=new Array();
		var enemy_bullets=new Array();
		var key=new Array();
		var time=1;
		var music_i=0;
		var death_num=0;
		
		var zhen_time=1;
		var zhen_trigg=0;
		var zhen_my;
		
		var e_zhen_time=1;
		var e_zhen_trigg=0;
		var e_zhen_my;
		
		var playerNumInGame=6;

		//to make sure that the key is  up  or down ,use a array
		var my_i=0;
		for(my_i=0;my_i<100;my_i++){
			key[my_i]=false;
		}
		
		var canvas = new Array();
		var p = new Array();
		
		
		var storage= window.localStorage;
		var string = new Array();
		player.playerId=storage.getItem("playerId");
		player.speed=parseInt(storage.getItem("speed"+player.playerId));
		player.attack=parseInt(storage.getItem("attack"+player.playerId));
		player.hp=parseInt(storage.getItem("hp"+player.playerId));
		player.kind=parseInt(storage.getItem("kind"+player.playerId));
		player.curr_hp=player.hp;
		player.canvasNum=0;
		player.alive=1;
		var s_s=storage.getItem("imageData"+player.playerId);
		string[0]=s_s.split(",");
		
		////////////
		canvas[0] = document.getElementById('p0');
		p[0] = canvas[0].getContext('2d');
		
		var dataArea=d[0].createImageData(100,200);
		for(var z=0;z<1;z++){
			for(var x=0; x<dataArea.width; x++) {
				for(var y=0; y<dataArea.height; y++) {
					var index = (y*dataArea.width+x)*4;  //calculate index
					
					dataArea.data[index] = (string[z][index]);   // red
					dataArea.data[index+1]=(string[z][index+1]);// green
					dataArea.data[index+2] =(string[z][index+2]);// blue
					dataArea.data[index+3] = (string[z][index+3]); 
					
				}
			}
			p[z].putImageData(dataArea,0,0);
		}
		throughScense();
	////////////////
	
		
		var playerName=document.getElementById("playerName");
		var killNum=document.getElementById("killNum");
		var deathNum=document.getElementById("deathNum");
		playerName.innerHTML=player.playerId;
		killNum.innerHTML=player.score;
		deathNum.innerHTML=death_num;
		
		socketInit("init",player.playerId,s_s,player.speed,player.hp,player.kind,player.attack);
		
		

		window.onload = function(){
			myCanvas = document.getElementById("main");
	        g = myCanvas.getContext("2d");
		}
	</script>
</body>
</html>